<script setup name="WindowMenu">
import { routes } from '@/router/routes'

const router = useRouter();

const menus = router.options.routes[0].children[0].children.filter(o => !o.meta.hide);
const handleMenuItemClick = (key) => {
  router.push({name: key});
}

const selectKeys = computed(() => [router.currentRoute.value.name]);
</script>

<template>
  <div class="window-menu">
    <a-menu mode="horizontal" :selected-keys="selectKeys" @menu-item-click="handleMenuItemClick">
      <a-menu-item v-for="menu in menus" :key="menu.name">{{menu.meta.title}}</a-menu-item>
    </a-menu>
  </div>
  
</template>

<style lang="less" scoped>
.window-menu{
  :deep(.arco-menu-horizontal .arco-menu-inner){
    padding: 14px 0;
  }
}

</style>